import React from 'react';
import { WeaTools, WeaTop, WeaProgress, WeaEchart } from 'ecCom';
import { Button, Modal, Rate, Tabs, Spin, Row, Col, Card, Form, Carousel } from 'antd';


class RiskRPItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            datas: [],
            riskNames: [],
            riskNum: 0,
            color:[],
            width:0
        }
    }

    componentWillUnMount() {
        this.setState({datas: [], riskNames: [], riskNum: 0,  color:[]});
    }

    shouldComponentUpdate(nextProps,nextState) {
        return (this.props.datas!=nextProps.datas)||
        (this.props.riskNum!=nextProps.riskNum)||
        (this.props.riskNames!=nextProps.riskNames)||
        (this.props.color!=nextProps.color)||
        (this.props.width!=nextProps.width);
    }

    render() {
        const datas = this.props.datas;
        const riskNum = this.props.riskNum;
        const riskNames = this.props.riskNames;
        const color = this.props.color;
        const width = this.props.width;

        let labelTop = {
            normal: {
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}',
                    textStyle: {
                        baseline: 'top'
                    }
                },
                labelLine: {
                    show: true
                }
            }
        };
    
        let labelBottom = {
            normal: {
                color: '#ccc',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        baseline: 'bottom'
                    }
                },
                labelLine: {
                    show: true
                }
            },
            emphasis: {
                color: '#ddd'
            }
        };
        let radius = [40, 55];

        let series = [];
        if (datas && datas.length > 0) {
            for (let i = 0; i < datas.length; i++) {
                series.push({
                    name: "风险类别",
                    type: 'pie',
                    radius: [40, 55],
                    center: [`${20 * i + 10}%`, '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: function (params) {
                                return params.value + '%'
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [
                        { name: '其他', value: 100 - datas[i].percent,riskNum1: datas[i].riskNum, itemStyle: labelBottom },
                        { name: datas[i].riskName, value: datas[i].percent, riskNum: datas[i].riskNum, itemStyle: labelTop, label: { show: true } }

                    ]
                });
            }
        }

        const option = {
            calculable: true,
            legend: {
                x: 'center',
                y: '90%',
                data: riskNames
            },
            title: {
                // text: '合同风险分析',
                // subtext: '风险类别占比',
                // x: 'center'
            },
            toolbox: {
                show: false,
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.data.riskNum) {
                        return params.name + "<br/>数量：" + params.data.riskNum + "<br/>占比：" + params.value + "%";
                    }else{
                        return params.name + "<br/>数量：" + (riskNum -  Number(params.data.riskNum1)) + "<br/>占比：" + params.value + "%";
                    }
                    
                }
            },
            series: series,
            color: color

        };

        return (
            <div ref="chart_div" style={{width:'100%',height:'100%'}}>
                <WeaEchart ref="chart" option={option} useDefault={false} style={{width:width,height:"190px"}}/>
            </div>
            
        );

    }
}

export default RiskRPItem;